<template>
  <div id="editor">
    <h2>标题</h2>
    <input class='title_input' type='text' v-model="wikiTitle"/>
    <h2>内容摘要</h2>
    <textarea class='summary_text' rows="3" cols="20" v-model="wikiSummary"/>
    <h2>tag分类</h2>
    <textarea class='summary_text' rows="3" cols="20" v-model="wikiTags"/>
    <h5>已有分类：{{allTags}}</h5>
    <h2>正文</h2>
    <!--note:https://www.npmjs.com/package/mavon-editor-->
    <mavon-editor v-model="wikiValue" @change="changeData" :toolbars="markdownOption" :ishljs="true"/>
    <div class="btng">
      <a class="btn" @click="selectSave()">
        <span>{{save_text}}</span>
      </a>
      <a class="btn" @click="saveAndView()">
        <span>保存并浏览</span>
      </a>
    </div>
    <div>
      <form method="post" @submit.prevent="submit($event)" enctype="multipart/form-data">
        <input type="file" size="30" name="photo" @change="getFile($event)"/>
        <br>
        <input type="text" name="name" v-model="attached_name" style="margin-top:15px;"/>
        <input type="submit" value="提交信息"/>
      </form>
    </div>
    <div>
      <ol>
        <li v-for="att in attaches" v-bind:key="att.id">
          {{att.name}}&emsp;&emsp;{{att.attached_url}}
        </li>
      </ol>
    </div>
  </div>
</template>

<script>

export default {
  name: 'editor',
  data () {
    return {
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      },
      wikiId: '',
      wikiTitle: '',
      wikiValue: '',
      contentHtml: '',
      wikiSummary: '',
      wikiTags: '',
      save_text: '保 存',
      saveButtonDown: 0,
      attached_name: '',
      file: '',
      attaches: [],
      allTags: ''
    }
  },
  methods: {
    getAttatenes () {
      let wikiId = this.wikiId
      if (wikiId) {
        this.$http.get(process.env.REST_URL + 'wiki/getWikiAttached/' + wikiId).then((res) => {
          // debugger
          this.attaches = res.data.data
          console.log(this.attaches)
        }, function (response) {
          console.log('error')
        })
      }
    },
    getFile () {
      this.file = event.target.files[0]
      console.log(this.file)
    },
    submit () {
      // debugger
      console.log('run uploadimg')
      if (this.saveButtonDown === 1) {
        return false
      }
      this.saveButtonDown = 1
      event.preventDefault()
      let formData = new FormData()
      formData.append('name', this.attached_name)
      formData.append('photo', this.file)
      formData.append('wiki_id', this.wikiId)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$http.post(process.env.REST_URL + 'wiki/uploadImg', formData, config).then((reps) => {
        // console.log('SUCCESS')
        // this.items = data.data.hits
        this.wikiId = this.wikiId ? this.wikiId : reps.data.data
        this.getAttatenes()
      }, function (response) {
        this.saveButtonDown = 0
        alert('save error')
        console.log('error')
      })
    },
    selectSave () {
      console.log('run selectSave')
      let Base64 = require('js-base64').Base64
      let wikiHtml = Base64.encode(this.contentHtml)
      if (this.saveButtonDown === 1) {
        return false
      }
      this.saveButtonDown = 1
      this.$http.post(process.env.REST_URL + 'wiki/saveWiki', {id: this.wikiId, title: this.wikiTitle, summary: this.wikiSummary, tags: this.wikiTags, data: this.wikiValue, data_html: wikiHtml}, { credentials: true }).then((reps) => {
        this.save_text = '已保存'
        console.log('SUCCESS')
        // this.items = data.data.hits
      }, function (response) {
        this.saveButtonDown = 0
        alert('save error')
        console.log('error')
      })
    },
    saveAndView () {
      console.log('run selectSave')
      let Base64 = require('js-base64').Base64
      let wikiHtml = Base64.encode(this.contentHtml)
      if (this.saveButtonDown === 1) {
        return false
      }
      this.saveButtonDown = 1
      this.$http.post(process.env.REST_URL + 'wiki/saveWiki', {id: this.wikiId, title: this.wikiTitle, summary: this.wikiSummary, tags: this.wikiTags, data: this.wikiValue, data_html: wikiHtml}, { credentials: true }).then((reps) => {
        this.save_text = '已保存'
        console.log('SUCCESS')
        // 如果是新建wiki，取后台返回的id
        let wikiId = this.wikiId ? this.wikiId : reps.data.data
        // this.$router.push('/p/' + wikiId)
        window.location.href = '/p/' + wikiId
        // this.items = data.data.hits
      }, function (response) {
        this.saveButtonDown = 0
        alert('save error')
        console.log('error')
      })
    },
    getWiki () {
      let wikiId = this.$route.query.id
      // if (!wikiId && typeof (wikiId) !== 'undefined' && wikiId !== 0) {
      if (wikiId) {
        this.$http.get(process.env.REST_URL + 'wiki/getWiki/' + wikiId).then((res) => {
          // console.log(res)
          this.wikiValue = res.data.data.content
          this.wikiTitle = res.data.data.title
          this.wikiSummary = res.data.data.summary
          this.wikiTags = res.data.data.tags
          this.wikiId = wikiId
          this.getAttatenes()
        }, function (response) {
          console.log('error')
        })
      }
    },
    getTags () {
      this.$http.get(process.env.REST_URL + 'wiki/getTags/').then((res) => {
        // console.log(res)
        this.allTags = res.data.data
      }, function (response) {
        console.log('error')
      })
    },
    changeData (value, render) {
      // console.log(value)
      // console.log(render)
      this.contentHtml = render
    }
  },
  created () {
    this.getWiki()
    this.getTags()
  },
  watch: {
    wikiValue: function (newVal, oldVal) {
      this.save_text = '保 存'
      this.saveButtonDown = 0
    },
    wikiTitle: function (newVal, oldVal) {
      this.save_text = '保 存'
      this.saveButtonDown = 0
    },
    wikiSummary: function (newVal, oldVal) {
      this.save_text = '保 存'
      this.saveButtonDown = 0
    },
    wikiTags: function (newVal, oldVal) {
      this.save_text = '保 存'
      this.saveButtonDown = 0
    }
  }
}
</script>

<style scoped>
  #editor {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
    color: #2c3e50;
    margin-top: 60px;
  }
  .title_input{
    width: 50%;
    height: 30px;
    font-size: 20px;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.16), 0 1px 1px 0 rgba(0,0,0,.12);
  }
  .summary_text{
    width: 50%;
    height: 65px;
    font-size: 20px;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.16), 0 1px 1px 0 rgba(0,0,0,.12);
  }
  .btng {
    padding: 20px;
  }
  .btn {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #8c8c8c;
    border: 1px solid hsla(0,0%,59%,.6);
    margin-right: auto;
    margin-left: auto;
    margin-top: 4px;
    padding: 8px 10px;
    width: 100px;
    height: 39px;
    border-radius: 40px;
    cursor: pointer;
  }

</style>
